<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { authAPI } from '@/api/index.js'

const router = useRouter()
const route = useRoute()

const username = ref(localStorage.getItem('currentUsername') || '')

// 修改密码相关
const changePasswordDialogVisible = ref(false)
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 密码验证规则
const validateNewPassword = (rule, value, callback) => {
  const pattern = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/
  if (!value) {
    callback(new Error('请输入密码'))
  } else if (!pattern.test(value)) {
    callback(new Error('密码必须包含字母、数字和特殊字符，且长度不少于8位'))
  } else {
    callback()
  }
}

const validateConfirmPassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请再次输入新密码'))
  } else if (value !== passwordForm.value.newPassword) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const passwordRules = {
  oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  newPassword: [{ required: true, trigger: 'blur', validator: validateNewPassword }],
  confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPassword }],
}

const formRef = ref()

function handleLogout() {
  localStorage.removeItem('token')
  localStorage.removeItem('currentUsername')
  router.push('/')
}

function handleChangePass() {
  changePasswordDialogVisible.value = true
}

// 提交修改密码
const submitChangePassword = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    const { oldPassword, newPassword } = passwordForm.value

    // 调用修改密码API
    const response = await authAPI.changePassword({
      oldPassword,
      newPassword,
    })

    if (response.code === 200) {
      ElMessage.success('密码修改成功，请重新登录')
      changePasswordDialogVisible.value = false
      // 清空表单
      passwordForm.value = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      }
      // 退出登录
      handleLogout()
    } else {
      ElMessage.error(response.message || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码失败：', error)
    ElMessage.error('修改密码失败，请稍后重试')
  }
}

// 取消修改密码
const cancelChangePassword = () => {
  changePasswordDialogVisible.value = false
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: '',
  }
  formRef.value?.clearValidate()
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="custom-header">
        <div class="header-title">
          <svg width="383" height="24" viewBox="0 0 383 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M24.3163 7.256L24.5083 9.24L25.3723 7.224L25.7883 4.216H21.4363L21.8523 1.4H29.3723L28.3803 8.28L25.6283 14.392L26.8763 23.224H23.4203L23.1643 19.864L21.6603 23.256H18.4603L21.9803 14.648L21.0203 7.288L21.2763 5.368H24.5723L24.3163 7.256ZM12.8283 8.184L13.7883 1.528L12.8283 0.279999H18.4283L18.0763 2.68H20.3803L19.9963 5.304H17.6923L17.2763 8.184H20.3163L19.9643 10.744H17.1163L15.6763 21.08C15.5909 21.6987 15.3136 22.2107 14.8443 22.616C14.3963 23.0213 13.8949 23.224 13.3403 23.224H10.1403L11.4843 21.912L13.0523 10.744H10.0763L10.4283 8.184H12.8283ZM4.79625 6.584H2.90825L3.32425 3.544H5.21225L5.56425 1.176L5.08425 0.247999H8.92425L8.44425 3.544H10.6523L10.2363 6.584H8.02825L5.66025 23.288H2.42825L4.79625 6.584ZM0.38025 22.136L2.84425 7.256H4.38025L1.88425 22.136H0.38025ZM6.81225 20.312L8.25225 7.256H9.75625L8.34825 20.312H6.81225ZM12.2203 12.728L10.8443 21.4H8.54025L9.94825 12.728H12.2203ZM19.7083 12.728L18.7163 21.464H16.5083L17.4683 12.728H19.7083ZM45.4018 19.416L47.4818 4.6H42.3938L42.8418 1.464H58.5218L58.0738 4.6H53.2098L51.1298 19.416H57.2738L56.7938 22.648H38.7138L39.1938 19.416H45.4018ZM30.1058 23.224L33.1778 14.232H38.6498L35.5778 23.224H30.1058ZM33.3698 13.016L32.9218 7.544H38.3938L38.8418 13.016H33.3698ZM34.2977 6.328L33.8498 0.855999H39.3218L39.7698 6.328H34.2977ZM60.7593 22.712L63.6393 2.2L62.3593 0.823999H86.7433L86.3273 3.736H68.9193L66.6793 19.768H85.0473L84.6313 22.712H60.7593ZM77.1112 8.056L79.9593 5.08H85.2393L79.4793 11.064L79.3833 11.096L84.1833 18.456H78.9033L76.4713 14.328L73.5913 18.456H68.2793L74.0713 11.32L73.9433 11.256L70.1033 4.984H75.3833L77.1112 8.056ZM110.709 0.247999L107.541 5.176L116.565 23.288H110.485L104.149 10.424L95.8928 23.288H89.8128L104.085 1.048L103.413 0.247999H110.709ZM132.914 20.312L134.706 7.544H132.85L124.658 22.744H118.578L126.77 7.544H120.722L121.138 4.504H135.122L135.602 1.144L134.834 0.247999H141.81L141.202 4.504H146.674L146.258 7.544H140.786L138.866 21.176C138.76 21.7947 138.472 22.3067 138.002 22.712C137.533 23.096 136.989 23.288 136.37 23.288H130.034L132.914 20.312ZM165.776 6.488L166.384 2.328L165.296 0.247999H172.752L171.856 6.488H175.696L175.12 10.616H171.28L170.096 18.808H174.64L174.096 22.616H158.928L159.472 18.808H164.048L165.2 10.616H161.232L161.808 6.488H165.776ZM158.672 19.736L156.208 16.632L155.28 23.256H150.48L151.536 15.768H148.432L155.088 7.096H150L150.384 4.248H160.016L159.472 8.024L156.912 11.512L156.88 11.736L159.376 14.84L158.672 19.736ZM159.088 3.544H153.936L153.232 1.08L152.528 0.311998H158.256L159.088 3.544ZM178.509 22.712L181.389 2.2L180.109 0.823999H204.493L204.077 3.736H186.669L184.429 19.768H202.797L202.381 22.712H178.509ZM194.861 8.056L197.709 5.08H202.989L197.229 11.064L197.133 11.096L201.933 18.456H196.653L194.221 14.328L191.341 18.456H186.029L191.821 11.32L191.693 11.256L187.853 4.984H193.133L194.861 8.056ZM225.067 8.792L223.979 9.08L222.571 19.096H232.587L233.803 17.88L233.131 22.744H217.291L219.051 10.264L217.707 10.584L218.123 7.544L219.467 7.224L219.979 3.608L219.307 2.68H224.875L224.395 6.008L225.483 5.752L226.091 1.464L225.195 0.247999H230.731L230.123 4.6L235.467 3.288L233.995 13.88C233.888 14.4987 233.621 15.0213 233.195 15.448C232.768 15.8533 232.288 16.056 231.755 16.056H228.683L229.675 14.648L230.699 7.416L229.707 7.672L228.363 17.272H223.883L225.067 8.792ZM215.723 20.92L206.379 22.744L206.859 19.192L209.195 18.744L210.315 10.712H208.043L208.491 7.544H210.763L211.531 2.072L210.603 0.855999H216.523L215.563 7.544H217.579L217.131 10.712H215.115L214.123 17.784L216.203 17.368L215.723 20.92ZM264.072 0.855999L261 22.744H236.68L239.592 2.04L238.568 0.855999H264.072ZM256.552 19.704L258.792 3.896H244.2L241.96 19.704H256.552ZM251.496 12.408L250.376 11.704L249.064 12.408H243.88L244.2 10.296H246.984L247.624 9.976L245.736 8.76H244.104L245.64 4.504H249.288L249.128 4.952H257.416L256.968 8.152L253.64 9.944L254.216 10.296H257L256.68 12.408H251.496ZM255.432 19.096L243.368 18.488L243.688 16.056L255.784 16.664L255.432 19.096ZM254.888 16.056L244.744 15.448L245.096 13.016L255.24 13.624L254.888 16.056ZM249.128 7.096L250.888 8.216L252.904 7.096H249.128ZM289.414 11.8L288.742 16.664H273.51L273.382 17.56H289.222L288.39 23.288H266.502L268.134 11.8H265.702L266.374 6.936H276.23L276.102 6.072H283.174L283.302 6.936H293.126L292.454 11.8H289.414ZM287.302 1.464H293.894L293.574 3.896H290.502L291.494 5.72H286.63L285.734 4.12L284.806 5.72H279.334L282.022 1.08L281.318 0.247999H288.006L287.302 1.464ZM274.502 1.464H280.518L280.198 3.896H277.702L278.726 5.72H273.862L272.966 4.12L272.038 5.72H266.566L269.254 1.08L268.55 0.247999H275.238L274.502 1.464ZM271.91 10.872H286.502L286.63 9.976H272.038L271.91 10.872ZM273.03 19.992L272.902 20.92H282.662L282.79 19.992H273.03ZM273.99 13.304L273.862 14.232H282.982L283.11 13.304H273.99ZM310.947 14.808L311.203 12.952H305.891L307.587 0.823999H323.651L321.955 12.952H316.067L315.811 14.808H321.635L321.187 17.848H315.395L315.139 19.672H321.635L321.219 22.712H303.843L304.259 19.672H310.275L310.531 17.848H305.123L305.571 14.808H310.947ZM298.435 9.112L299.203 3.672H297.667L298.051 0.823999H306.499L306.115 3.672H304.259L303.491 9.112H305.443L304.963 12.344H303.043L302.211 18.392L304.067 18.04L303.651 21.144L294.819 22.712L295.235 19.672L296.995 19.352L297.987 12.344H296.323L296.803 9.112H298.435ZM310.467 5.432H312.291L312.515 3.704H310.723L310.467 5.432ZM318.307 10.04L318.531 8.312H316.739L316.483 10.04H318.307ZM317.379 3.704L317.155 5.432H318.915L319.171 3.704H317.379ZM311.619 10.04L311.875 8.312H310.083L309.859 10.04H311.619ZM352.865 3.256L338.561 3.8L336.129 5.432H351.361L350.881 8.856H338.241L334.081 11.512H344.737L344.609 10.264H350.689L351.201 15.16H345.121L345.057 14.552H341.569L340.641 21.176C340.534 21.7947 340.246 22.3067 339.777 22.712C339.307 23.096 338.763 23.288 338.145 23.288H331.809L334.657 20.312L335.489 14.552H326.977L327.393 11.512L331.873 8.824H327.777L328.257 5.496L330.657 4.088L327.201 4.216L327.681 0.855999L353.313 0.216L352.865 3.256ZM350.817 22.136H345.345L343.169 16.056H348.641L350.817 22.136ZM329.537 22.136H324.065L327.969 16.056H333.409L329.537 22.136ZM380.414 7.544L381.47 13.016H377.214L377.086 12.44L365.054 13.016L365.47 9.976L368.574 5.112H365.534L365.982 2.072H371.102L371.198 1.464L370.174 0.247999H377.47L377.182 2.072H382.398L381.95 5.112H374.654L371.742 9.656L376.51 9.432L376.158 7.544H380.414ZM355.998 8.152L360.126 1.656L359.454 0.855999H366.142L361.47 8.152H365.118L360.446 15.448H364.094L363.678 18.488H354.558L354.974 15.448L357.694 11.192H355.582L355.998 8.152ZM377.726 13.624L376.958 19.096H379.39L380.766 17.88L380.094 22.744H371.582L372.862 13.624H377.726ZM371.646 13.624L368.542 22.744H363.678L366.782 13.624H371.646ZM363.07 22.744L353.854 23.288L354.302 20.312L363.486 19.704L363.07 22.744Z"
            />
            <defs>
              <linearGradient
                id="paint0_linear_184_4173"
                x1="0"
                y1="12"
                x2="383"
                y2="12"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#2F403E" />
                <stop offset="1" stop-color="#506D6A" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="header-right">
          <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_184_4161)">
              <circle cx="18" cy="18" r="17.25" fill="white" stroke="#323333" stroke-width="1.5" />
              <circle cx="18" cy="40.5" r="15" stroke="#323333" stroke-width="1.5" />
              <mask id="path-4-inside-1_184_4161" fill="white">
                <path
                  d="M18 5.625C23.5993 5.625 28.1248 10.1801 28.125 15.7305C28.125 21.281 23.5994 25.875 18 25.875C12.4007 25.875 7.87521 21.3199 7.875 15.7695C7.875 10.219 12.4006 5.625 18 5.625Z"
                />
              </mask>
              <path
                d="M18 5.625V4.375V5.625ZM28.125 15.7305H29.375V15.7304L28.125 15.7305ZM18 25.875V27.125V25.875ZM7.875 15.7695H6.625V15.7696L7.875 15.7695ZM18 5.625V6.875C22.9081 6.875 26.8748 10.8696 26.875 15.7305L28.125 15.7305L29.375 15.7304C29.3748 9.49055 24.2905 4.375 18 4.375V5.625ZM28.125 15.7305H26.875C26.875 20.5977 22.902 24.625 18 24.625V25.875V27.125C24.2968 27.125 29.375 21.9643 29.375 15.7305H28.125ZM18 25.875V24.625C13.0919 24.625 9.12519 20.6304 9.125 15.7695L7.875 15.7695L6.625 15.7696C6.62524 22.0095 11.7095 27.125 18 27.125V25.875ZM7.875 15.7695H9.125C9.125 10.9023 13.098 6.875 18 6.875V5.625V4.375C11.7032 4.375 6.625 9.53567 6.625 15.7695H7.875Z"
                fill="#323333"
                mask="url(#path-4-inside-1_184_4161)"
              />
              <path
                d="M15.0945 19.125C15.4275 20.2033 16.6021 21 18 21C19.3978 21 20.5724 20.2033 20.9055 19.125"
                stroke="#13B7A4"
                stroke-width="1.5"
                stroke-linecap="round"
              />
              <path
                d="M13.5 13.5L15.5 15.1875L13.5 16.875"
                stroke="#323333"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path d="M20.25 15.1875H23.625" stroke="#323333" stroke-width="1.5" stroke-linecap="round" />
            </g>
            <defs>
              <clipPath id="clip0_184_4161">
                <rect width="36" height="36" rx="18" fill="white" />
              </clipPath>
            </defs>
          </svg>
          <span class="welcome"> 欢迎你，{{ username }}!</span>
          <el-button @click="handleChangePass" class="header-btn">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M8 9.02148C7.83424 9.02148 7.67527 9.08733 7.55806 9.20454C7.44085 9.32175 7.375 9.48072 7.375 9.64648V11.6152C7.375 11.781 7.44085 11.94 7.55806 12.0572C7.67527 12.1744 7.83424 12.2402 8 12.2402C8.16576 12.2402 8.32473 12.1744 8.44194 12.0572C8.55915 11.94 8.625 11.781 8.625 11.6152V9.64648C8.625 9.48072 8.55915 9.32175 8.44194 9.20454C8.32473 9.08733 8.16576 9.02148 8 9.02148Z"
              />
              <path
                d="M12.9977 6.5214H6.03391C6.03327 6.52136 6.03267 6.52108 6.03224 6.52061C6.0318 6.52015 6.03156 6.51953 6.03156 6.5189V4.23765V4.21905C6.03156 3.69691 6.23898 3.19615 6.6082 2.82694C6.97741 2.45772 7.47817 2.2503 8.00031 2.2503C8.52246 2.2503 9.02322 2.45772 9.39243 2.82694C9.76164 3.19615 9.96906 3.69691 9.96906 4.21905V4.46624C9.96906 4.632 10.0349 4.79097 10.1521 4.90818C10.2693 5.02539 10.4283 5.09124 10.5941 5.09124C10.7598 5.09124 10.9188 5.02539 11.036 4.90818C11.1532 4.79097 11.2191 4.632 11.2191 4.46624V4.24999C11.2191 2.3778 9.68781 0.90077 7.81875 1.00468C6.125 1.09936 4.78125 2.50218 4.78125 4.21874V6.51874C4.78125 6.51907 4.78119 6.51939 4.78106 6.5197C4.78093 6.52 4.78075 6.52028 4.78052 6.52051C4.78029 6.52074 4.78001 6.52092 4.77971 6.52105C4.7794 6.52117 4.77908 6.52124 4.77875 6.52124H3.00234C2.8707 6.52124 2.74035 6.54717 2.61873 6.59755C2.49711 6.64794 2.3866 6.72178 2.29352 6.81487C2.20045 6.90797 2.12662 7.01848 2.07625 7.14011C2.02589 7.26174 1.99998 7.3921 2 7.52374V13.9975C1.99998 14.1291 2.02589 14.2595 2.07625 14.3811C2.12662 14.5027 2.20045 14.6133 2.29352 14.7064C2.3866 14.7994 2.49711 14.8733 2.61873 14.9237C2.74035 14.9741 2.8707 15 3.00234 15H12.9977C13.1293 15 13.2597 14.9741 13.3813 14.9237C13.5029 14.8733 13.6134 14.7994 13.7065 14.7064C13.7996 14.6133 13.8734 14.5027 13.9237 14.3811C13.9741 14.2595 14 14.1291 14 13.9975V7.52374C14 7.2579 13.8944 7.00295 13.7064 6.81498C13.5184 6.627 13.2635 6.5214 12.9977 6.5214ZM12.75 13.7475C12.75 13.7481 12.7498 13.7487 12.7493 13.7492C12.7489 13.7497 12.7483 13.75 12.7477 13.75H3.25234C3.25171 13.75 3.25111 13.7497 3.25068 13.7492C3.25024 13.7487 3.25 13.7481 3.25 13.7475V7.77374C3.25 7.77312 3.25025 7.77252 3.25069 7.77208C3.25113 7.77164 3.25172 7.7714 3.25234 7.7714H12.7477C12.7483 7.7714 12.7489 7.77164 12.7493 7.77208C12.7498 7.77252 12.75 7.77312 12.75 7.77374V13.7475Z"
              />
            </svg>
            修改密码
          </el-button>
          <el-button text @click="handleLogout" class="header-btn">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M8 9.02148C7.83424 9.02148 7.67527 9.08733 7.55806 9.20454C7.44085 9.32175 7.375 9.48072 7.375 9.64648V11.6152C7.375 11.781 7.44085 11.94 7.55806 12.0572C7.67527 12.1744 7.83424 12.2402 8 12.2402C8.16576 12.2402 8.32473 12.1744 8.44194 12.0572C8.55915 11.94 8.625 11.781 8.625 11.6152V9.64648C8.625 9.48072 8.55915 9.32175 8.44194 9.20454C8.32473 9.08733 8.16576 9.02148 8 9.02148Z"
              />
              <path
                d="M12.9977 6.5214H6.03391C6.03327 6.52136 6.03267 6.52108 6.03224 6.52061C6.0318 6.52015 6.03156 6.51953 6.03156 6.5189V4.23765V4.21905C6.03156 3.69691 6.23898 3.19615 6.6082 2.82694C6.97741 2.45772 7.47817 2.2503 8.00031 2.2503C8.52246 2.2503 9.02322 2.45772 9.39243 2.82694C9.76164 3.19615 9.96906 3.69691 9.96906 4.21905V4.46624C9.96906 4.632 10.0349 4.79097 10.1521 4.90818C10.2693 5.02539 10.4283 5.09124 10.5941 5.09124C10.7598 5.09124 10.9188 5.02539 11.036 4.90818C11.1532 4.79097 11.2191 4.632 11.2191 4.46624V4.24999C11.2191 2.3778 9.68781 0.90077 7.81875 1.00468C6.125 1.09936 4.78125 2.50218 4.78125 4.21874V6.51874C4.78125 6.51907 4.78119 6.51939 4.78106 6.5197C4.78093 6.52 4.78075 6.52028 4.78052 6.52051C4.78029 6.52074 4.78001 6.52092 4.77971 6.52105C4.7794 6.52117 4.77908 6.52124 4.77875 6.52124H3.00234C2.8707 6.52124 2.74035 6.54717 2.61873 6.59755C2.49711 6.64794 2.3866 6.72178 2.29352 6.81487C2.20045 6.90797 2.12662 7.01848 2.07625 7.14011C2.02589 7.26174 1.99998 7.3921 2 7.52374V13.9975C1.99998 14.1291 2.02589 14.2595 2.07625 14.3811C2.12662 14.5027 2.20045 14.6133 2.29352 14.7064C2.3866 14.7994 2.49711 14.8733 2.61873 14.9237C2.74035 14.9741 2.8707 15 3.00234 15H12.9977C13.1293 15 13.2597 14.9741 13.3813 14.9237C13.5029 14.8733 13.6134 14.7994 13.7065 14.7064C13.7996 14.6133 13.8734 14.5027 13.9237 14.3811C13.9741 14.2595 14 14.1291 14 13.9975V7.52374C14 7.2579 13.8944 7.00295 13.7064 6.81498C13.5184 6.627 13.2635 6.5214 12.9977 6.5214ZM12.75 13.7475C12.75 13.7481 12.7498 13.7487 12.7493 13.7492C12.7489 13.7497 12.7483 13.75 12.7477 13.75H3.25234C3.25171 13.75 3.25111 13.7497 3.25068 13.7492C3.25024 13.7487 3.25 13.7481 3.25 13.7475V7.77374C3.25 7.77312 3.25025 7.77252 3.25069 7.77208C3.25113 7.77164 3.25172 7.7714 3.25234 7.7714H12.7477C12.7483 7.7714 12.7489 7.77164 12.7493 7.77208C12.7498 7.77252 12.75 7.77312 12.75 7.77374V13.7475Z"
              />
            </svg>
            退出登录
          </el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu router class="custom-menu" :default-active="route.path">
            <el-menu-item index="/home/data-boat">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M10 18.3334C5.39771 18.3334 1.66667 14.6024 1.66667 10.0001C1.66667 5.39779 5.39771 1.66675 10 1.66675C14.6023 1.66675 18.3333 5.39779 18.3333 10.0001C18.3333 14.6024 14.6023 18.3334 10 18.3334ZM10 17.0834C13.9121 17.0834 17.0833 13.9122 17.0833 10.0001C17.0833 6.088 13.9121 2.91675 10 2.91675C6.08792 2.91675 2.91667 6.088 2.91667 10.0001C2.91667 13.9122 6.08792 17.0834 10 17.0834Z"
                  fill="#323333"
                />
                <path
                  d="M8.56998 10.1619L10.1604 11.8944C10.2175 11.9566 10.2863 12.0064 10.3633 12.0412C10.4402 12.0759 10.5233 12.0948 10.6077 12.0965C10.6921 12.0983 10.776 12.0829 10.8543 12.0513C10.9326 12.0198 11.0037 11.9727 11.0633 11.9129L14.1925 8.7746C14.2521 8.71686 14.2996 8.64783 14.3322 8.57153C14.3649 8.49523 14.382 8.4132 14.3826 8.33021C14.3832 8.24723 14.3673 8.16495 14.3357 8.08819C14.3042 8.01143 14.2577 7.94172 14.1989 7.88312C14.1402 7.82452 14.0703 7.77821 13.9935 7.74689C13.9166 7.71558 13.8343 7.69988 13.7513 7.70072C13.6683 7.70155 13.5864 7.71891 13.5102 7.75176C13.4339 7.78462 13.365 7.83233 13.3075 7.8921L10.6394 10.5677L9.04185 8.82731C8.98418 8.76446 8.91426 8.71409 8.8364 8.67928C8.75853 8.64448 8.67436 8.62598 8.58907 8.62492C8.50379 8.62387 8.41919 8.64028 8.34048 8.67316C8.26178 8.70603 8.19064 8.75466 8.13143 8.81606L5.80018 11.2327C5.68509 11.352 5.6221 11.5121 5.62507 11.6779C5.62804 11.8436 5.69673 12.0014 5.81602 12.1165C5.93531 12.2316 6.09544 12.2946 6.26117 12.2916C6.42691 12.2886 6.58467 12.2199 6.69977 12.1006L8.56998 10.1619Z"
                  fill="#13B7A4"
                />
              </svg>
              <span>数据看板</span>
            </el-menu-item>
            <el-menu-item index="/home/index">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M7 2.625H9C10.3117 2.625 11.375 3.68832 11.375 5V17.375H5C3.68832 17.375 2.625 16.3117 2.625 15V7C2.625 4.58375 4.58375 2.625 7 2.625Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
                <path
                  d="M15.1504 6.625C16.3789 6.62521 17.3748 7.62109 17.375 8.84961V15C17.375 16.3117 16.3117 17.375 15 17.375H13.875V7.90039C13.875 7.19623 14.4462 6.625 15.1504 6.625Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
                <path
                  d="M8.25 5.73706L8.37598 5.74976C8.66077 5.80804 8.875 6.06004 8.875 6.36206C8.875 6.66409 8.66077 6.91608 8.37598 6.97437L8.25 6.98706H5.75C5.40482 6.98706 5.125 6.70724 5.125 6.36206C5.125 6.01688 5.40482 5.73706 5.75 5.73706H8.25Z"
                  fill="#646566"
                />
                <path
                  d="M8.25 8.73706L8.37598 8.74976C8.66077 8.80804 8.875 9.06004 8.875 9.36206C8.875 9.66409 8.66077 9.91608 8.37598 9.97437L8.25 9.98706H5.75C5.40482 9.98706 5.125 9.70724 5.125 9.36206C5.125 9.01688 5.40482 8.73706 5.75 8.73706H8.25Z"
                  fill="#646566"
                />
              </svg>
              <span>首页管理</span>
            </el-menu-item>
            <el-menu-item index="/home/sort">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M4.69727 11.1084H6.82031C7.96432 11.1086 8.89138 12.0357 8.8916 13.1797V15.3027C8.8916 16.4469 7.96445 17.3748 6.82031 17.375H4.69727C3.55294 17.375 2.625 16.4471 2.625 15.3027V13.1797C2.62522 12.0355 3.55307 11.1084 4.69727 11.1084ZM4.69727 2.625H6.82031C7.96445 2.62522 8.8916 3.55307 8.8916 4.69727V6.82031C8.89138 7.96432 7.96432 8.89138 6.82031 8.8916H4.69727C3.55307 8.8916 2.62522 7.96445 2.625 6.82031V4.69727C2.625 3.55294 3.55294 2.625 4.69727 2.625ZM13.1797 2.625H15.3027C16.4471 2.625 17.375 3.55294 17.375 4.69727V6.82031C17.3748 7.96445 16.4469 8.8916 15.3027 8.8916H13.1797C12.0357 8.89138 11.1086 7.96432 11.1084 6.82031V4.69727C11.1084 3.55307 12.0355 2.62522 13.1797 2.625Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
                <path
                  d="M14.2256 11.075C15.9646 11.075 17.3748 12.4845 17.375 14.2234C17.375 15.9625 15.9647 17.3728 14.2256 17.3728C12.4867 17.3725 11.0772 15.9623 11.0772 14.2234C11.0774 12.4847 12.4869 11.0752 14.2256 11.075Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
              </svg>
              <span>分类管理</span>
            </el-menu-item>
            <el-menu-item index="/home/spot">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9.9957 0.800049C11.7901 0.800049 13.4391 1.42454 14.7389 2.46606L14.8492 2.55884C14.8625 2.57012 14.8749 2.58155 14.8863 2.59302C15.0026 2.7093 15.068 2.86672 15.068 3.03052L15.0553 3.15161C15.0314 3.27031 14.9735 3.38083 14.8863 3.46802C14.77 3.5843 14.6126 3.64966 14.4488 3.64966C14.285 3.64966 14.1276 3.5843 14.0113 3.46802L13.8277 3.32935C12.761 2.52217 11.4346 2.04224 9.99374 2.04224C6.48418 2.04224 3.64023 4.88618 3.64023 8.39575L3.64609 8.68677C3.71131 10.131 4.25994 11.4481 5.13046 12.4836L5.13535 12.4885L9.99374 17.804L14.8033 12.5432L14.8072 12.5393C15.7662 11.4265 16.3492 9.97858 16.3492 8.3938C16.3492 7.38777 16.1121 6.43582 15.6949 5.59009L15.6998 5.58716L15.6402 5.46997C15.5959 5.38322 15.5719 5.28705 15.5719 5.18872C15.5719 5.02493 15.6372 4.86751 15.7535 4.75122C15.8698 4.63493 16.0272 4.56958 16.191 4.56958C16.3548 4.56958 16.5122 4.63493 16.6285 4.75122C16.6752 4.79787 16.7136 4.85098 16.7428 4.90845V4.9104C17.2826 5.95387 17.5894 7.13825 17.5894 8.39575C17.5894 10.2423 16.9273 11.9345 15.8307 13.2502L15.8228 13.26C15.8056 13.284 15.7914 13.3028 15.7769 13.3186L15.7525 13.345L15.7477 13.3508C15.7014 13.4044 15.6529 13.4552 15.606 13.5071L15.6051 13.5061L15.4781 13.6458L10.4625 19.1311C10.2789 19.3315 9.99507 19.3845 9.75937 19.2825L9.66171 19.2297L9.66269 19.2288L9.65097 19.2229L9.57089 19.1692C9.54555 19.1492 9.52096 19.1262 9.49863 19.1018L4.35214 13.4729L4.22519 13.3333L4.21249 13.3186L4.16953 13.2668L4.16269 13.2581L3.96152 13.0071C2.98289 11.7288 2.39999 10.1304 2.39999 8.39575C2.39999 4.20027 5.80211 0.800049 9.9957 0.800049Z"
                  fill="#646566"
                />
                <path
                  d="M9.9996 5.92505C11.3673 5.92505 12.475 7.03348 12.4752 8.39966C12.4752 9.76576 11.3657 10.8752 9.9996 10.8752C8.63368 10.875 7.52499 9.76563 7.52499 8.39966C7.52521 7.03387 8.63381 5.92526 9.9996 5.92505Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
              </svg>
              <span>点位管理</span>
            </el-menu-item>
            <el-menu-item index="/home/user">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9.99023 1.625C12.4033 1.625 14.3563 3.59299 14.3564 5.99023C14.3564 8.3907 12.4004 10.375 9.99023 10.375C7.57728 10.3748 5.62517 8.4069 5.625 6.00977C5.625 3.60941 7.58023 1.62517 9.99023 1.625Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
                <path
                  d="M5.07758 12.4451H14.8246C16.2843 12.4451 17.468 13.628 17.4682 15.0876C17.4682 16.5475 16.2845 17.7312 14.8246 17.7312H5.07758C3.61795 17.731 2.435 16.5473 2.435 15.0876C2.43523 13.6282 3.61809 12.4453 5.07758 12.4451Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
                <path d="M11.999 15.092H14.799" stroke="#646566" stroke-width="1.25" stroke-linecap="round" />
              </svg>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/home/service">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M5.46 9.4048C5.46 9.7252 5.7561 10.0096 6.0882 10.0096C6.16926 10.0119 6.24997 9.99795 6.32558 9.96863C6.40119 9.93932 6.47019 9.8952 6.52853 9.83887C6.58687 9.78254 6.63338 9.71513 6.66533 9.6406C6.69728 9.56606 6.71403 9.48589 6.7146 9.4048C6.7146 9.0844 6.4194 8.8 6.0873 8.8C5.7552 8.8 5.46 9.0844 5.46 9.4048Z"
                  fill="#646566"
                />
                <path
                  d="M5.46 6.3299C5.46 6.6503 5.7552 6.9347 6.0873 6.9347C6.16838 6.93685 6.24907 6.92284 6.32468 6.89349C6.40029 6.86414 6.46929 6.82004 6.52768 6.76374C6.58607 6.70745 6.63267 6.6401 6.66476 6.56561C6.69685 6.49113 6.71379 6.411 6.7146 6.3299C6.7146 6.0095 6.4194 5.7251 6.0873 5.7251C5.7552 5.7251 5.46 6.0095 5.46 6.3299Z"
                  fill="#646566"
                />
                <path
                  d="M8.1924 10.0096H13.8768C14.035 10.0068 14.1857 9.94167 14.2962 9.82846C14.4067 9.71524 14.4682 9.56302 14.4672 9.4048C14.4672 9.0844 14.172 8.8 13.8399 8.8H8.1915C7.8594 8.8 7.5642 9.0844 7.5642 9.4048C7.5642 9.7252 7.8594 10.0096 8.1924 10.0096Z"
                  fill="#646566"
                />
                <path
                  d="M8.1915 6.9347H13.8759C14.0341 6.93163 14.1848 6.8665 14.2954 6.75336C14.406 6.64022 14.4677 6.48813 14.4672 6.3299C14.4672 6.0095 14.172 5.7251 13.8399 5.7251H8.1915C7.8594 5.7251 7.5642 6.0095 7.5642 6.3299C7.5642 6.6503 7.8594 6.9347 8.1915 6.9347Z"
                  fill="#646566"
                />
                <rect
                  x="2.625"
                  y="2.625"
                  width="14.75"
                  height="14.75"
                  rx="2.375"
                  stroke="#646566"
                  stroke-width="1.25"
                />
              </svg>
              <span>服务管理</span>
            </el-menu-item>
            <el-menu-item index="/home/notice">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M7 2.625H9C10.3117 2.625 11.375 3.68832 11.375 5V17.375H5C3.68832 17.375 2.625 16.3117 2.625 15V7C2.625 4.58375 4.58375 2.625 7 2.625Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
                <path
                  d="M15.1504 6.625C16.3789 6.62521 17.3748 7.62109 17.375 8.84961V15C17.375 16.3117 16.3117 17.375 15 17.375H13.875V7.90039C13.875 7.19623 14.4462 6.625 15.1504 6.625Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
                <path
                  d="M8.25 5.73706L8.37598 5.74976C8.66077 5.80804 8.875 6.06004 8.875 6.36206C8.875 6.66409 8.66077 6.91608 8.37598 6.97437L8.25 6.98706H5.75C5.40482 6.98706 5.125 6.70724 5.125 6.36206C5.125 6.01688 5.40482 5.73706 5.75 5.73706H8.25Z"
                  fill="#646566"
                />
                <path
                  d="M8.25 8.73706L8.37598 8.74976C8.66077 8.80804 8.875 9.06004 8.875 9.36206C8.875 9.66409 8.66077 9.91608 8.37598 9.97437L8.25 9.98706H5.75C5.40482 9.98706 5.125 9.70724 5.125 9.36206C5.125 9.01688 5.40482 8.73706 5.75 8.73706H8.25Z"
                  fill="#646566"
                />
              </svg>
              <span>公告管理</span>
            </el-menu-item>
            <el-menu-item index="/home/notice-banner">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M2.625 5.625C2.625 4.31332 3.68832 3.25 5 3.25H15C16.3117 3.25 17.375 4.31332 17.375 5.625V14.375C17.375 15.6867 16.3117 16.75 15 16.75H5C3.68832 16.75 2.625 15.6867 2.625 14.375V5.625Z"
                  stroke="#646566"
                  stroke-width="1.25"
                />
                <path
                  d="M6.25 7.5H13.75M6.25 10H11.25"
                  stroke="#646566"
                  stroke-width="1.25"
                  stroke-linecap="round"
                />
              </svg>
              <span>公告轮播</span>
            </el-menu-item>
            <el-menu-item index="/home/log">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M5.46 9.4048C5.46 9.7252 5.7561 10.0096 6.0882 10.0096C6.16926 10.0119 6.24997 9.99795 6.32558 9.96863C6.40119 9.93932 6.47019 9.8952 6.52853 9.83887C6.58687 9.78254 6.63338 9.71513 6.66533 9.6406C6.69728 9.56606 6.71403 9.48589 6.7146 9.4048C6.7146 9.0844 6.4194 8.8 6.0873 8.8C5.7552 8.8 5.46 9.0844 5.46 9.4048Z"
                  fill="#646566"
                />
                <path
                  d="M5.46 6.3299C5.46 6.6503 5.7552 6.9347 6.0873 6.9347C6.16838 6.93685 6.24907 6.92284 6.32468 6.89349C6.40029 6.86414 6.46929 6.82004 6.52768 6.76374C6.58607 6.70745 6.63267 6.6401 6.66476 6.56561C6.69685 6.49113 6.71379 6.411 6.7146 6.3299C6.7146 6.0095 6.4194 5.7251 6.0873 5.7251C5.7552 5.7251 5.46 6.0095 5.46 6.3299Z"
                  fill="#646566"
                />
                <path
                  d="M8.1924 10.0096H13.8768C14.035 10.0068 14.1857 9.94167 14.2962 9.82846C14.4067 9.71524 14.4682 9.56302 14.4672 9.4048C14.4672 9.0844 14.172 8.8 13.8399 8.8H8.1915C7.8594 8.8 7.5642 9.0844 7.5642 9.4048C7.5642 9.7252 7.8594 10.0096 8.1924 10.0096Z"
                  fill="#646566"
                />
                <path
                  d="M8.1915 6.9347H13.8759C14.0341 6.93163 14.1848 6.8665 14.2954 6.75336C14.406 6.64022 14.4677 6.48813 14.4672 6.3299C14.4672 6.0095 14.172 5.7251 13.8399 5.7251H8.1915C7.8594 5.7251 7.5642 6.0095 7.5642 6.3299C7.5642 6.6503 7.8594 6.9347 8.1915 6.9347Z"
                  fill="#646566"
                />
                <rect
                  x="2.625"
                  y="2.625"
                  width="14.75"
                  height="14.75"
                  rx="2.375"
                  stroke="#646566"
                  stroke-width="1.25"
                />
              </svg>
              <span>用户日志</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="main-content">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="changePasswordDialogVisible"
      title="修改密码"
      width="400px"
      :close-on-click-modal="false"
      @close="cancelChangePassword"
    >
      <!-- 分隔线 -->
      <div class="dialog-divider"></div>

      <el-form
        ref="formRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-position="top"
        status-icon
        class="password-form"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入旧密码" show-password />
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" show-password />
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitChangePassword">确认</el-button>
          <el-button @click="cancelChangePassword">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.main-content {
  margin: 24px;
  padding: 0 10px;
  background: #fff;
  border-radius: 12px;
}
.common-layout {
  width: 100%;
  height: 100vh;
  display: flex;
  background-color: #f5f7fa;
}

.el-container {
  width: 100%;
  height: 100%;
}

.custom-header {
  background: url('@/assets/header.png') no-repeat right center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 32px;
  @media (prefers-color-scheme: dark) {
    background: url('@/assets/header-dark.png') no-repeat right center;
  }
}

.header-title {
  display: flex;
  align-items: center;
  svg {
    fill: #506d6a;
    /* fill: #ffffff; */
  }
  @media (prefers-color-scheme: dark) {
    svg {
      fill: #ffffff;
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.welcome {
  margin-right: 8px;
  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  color: #323333;
  @media (prefers-color-scheme: dark) {
    color: #ffffff;
  }
}

.header-btn {
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  border-radius: 18px;
  background: #ffffff80;
  border: none;
  color: #323333;
  margin-left: 0;
  svg {
    margin-right: 4px;
    fill: #323333;
  }
  @media (prefers-color-scheme: dark) {
    background: #00000029;
    color: #ffffff;
    svg {
      fill: #ffffff;
    }
  }
}

.header-btn:hover {
  background: #ffffff;
  color: #323333;
}

.custom-menu {
  background-image: url('@/assets/side-bg.png');
  background-position: left center;
  height: 100%;
  border-right: none;
  padding: 24px 8px;

  .el-menu-item.is-active {
    color: #000;
    background: #fff;
  }
  .el-menu-item {
    margin-bottom: 8px;
    color: #646566;
    font-family: PingFang SC;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    border-radius: 8px;
    &:hover {
      color: #323333;
      background: #ffffff80;
    }
  }
  svg {
    margin-right: 8px;
  }
  @media (prefers-color-scheme: dark) {
    background: #21312f;
    .el-menu-item {
      color: #ffffff;
    }
    .el-menu-item.is-active {
      background: #ffffff29;
      color: #ffffff;
    }
  }
}

.el-main {
  padding: 0;
  width: 100%;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.password-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.2;
}

.dialog-footer {
  text-align: right;
}

.dialog-divider {
  height: 1px;
  background-color: #e4e7ed;
  margin: 0 0 20px 0;
  border: none;
}

.password-form :deep(.el-form-item__label) {
  font-weight: bold !important;
  color: #333;
  margin-bottom: 8px;
  font-size: 14px;
}

.password-form :deep(.el-form-item) {
  margin-bottom: 20px;
}
</style>
